<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" th:href="@{/public/lib/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/category/newslist.css}">
    <script th:src="@{/public/lib/jquery/jquery-3.7.1.min.js}"></script>
    <script th:src="@{/public/lib/layui/layui.js}"></script>
    <script th:src="@{/category/technology.js}"></script>
</head>
<body>
<!--条件搜索区-->
<div class="search">
    <form action="">
        <div>
            <label for="title">标题</label>
            <input type="text" id="title" autocomplete="off" placeholder="请输入标题">
        </div>
        <div>
            <label for="author">导演</label>
            <input type="text" id="author" autocomplete="off" placeholder="请输入导演">
        </div>

    </form>
</div>

<!--按钮区-->
<div class="action">

    <div>
        <button id="search-btn" type="button">查询</button>
    </div>
    <div>
        <button id="reset-btn" type="button">重置</button>
    </div>
</div>

<!--数据区-->
<div class="data">

    <div class="nav">
        <div id="titlenews">科幻电影</div>
        <table id="tbl">
            <tbody>

            </tbody>
        </table>
    </div>
</div>

<!--分页区-->
<div class="paginate">
    <ul>
        <li class="first fixed"><a href="javascript:void(0)">首页</a></li>
        <li class="prev fixed"><a href="javascript:void(0)">上一页</a></li>

        <li class="next fixed"><a href="javascript:void(0)">下一页</a></li>
        <li class="last fixed"><a href="javascript:void(0)">尾页</a></li>
    </ul>
</div>
</body>
</html>